<template>
	<view class="box">
		<view class="top">
			<view class="f26">当前余额</view>
			<view class="total">
				{{allmoney}}<text class="f26">元</text>
			</view>
		</view>
		<view class="content">
			<view class="title f26 bold">充值金额</view>
			<view class="input f-w f34 bold">
				￥
				<input type="digit" 
					placeholder="请输入充值金额"
					placeholder-style="font-weight:400" 
					@input='clear'
					v-model="num"  />
			</view>
			
			<view class="list fw-bt">
				<view :class="active===index?'showColor':''" v-for="(item,index) of list" :key="index" @click="checkNum(index)">
					<view class="tag">送{{item.data.give}}元</view>
					<view class="demo bold">￥{{item.data.price}}</view>
				</view>
				
			</view>
		</view>
		<view class="btn">
			<view @click="cacel">取消充值</view>
			<view class="b2" @click="sure">确认充值</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:'',//
				id:'',
				active:-1,//
				allmoney:0,
				list:[],
			}
		},
		onShow() {
			this.getuserinfo()
			this.getlist()
		},
		methods: {
			clear(){
				this.id=''
				
			},
			getuserinfo() {
				this.$request('user', {}, 'GET').then(res => {
					this.allmoney=res.data.now_money
				})
			},
			// 获取配置列表
			getlist(){
				this.$request('common/recharge_quota', {}, 'GET').then(res => {
					 this.list=res.data.recharge_quota
				})
			},
			// 切换充值金额
			checkNum(index){
				this.active=index;
				this.id=this.list[index].id
				console.log(this.id)
				this.num=this.list[index].data.price;
			},
			// 取消充值
			cacel(){
				this.id='';
				this.num='';
				this.active=-1;
			},
			// 确认充值
			sure(){
				if(!this.num){
					this.$showToast('请输入充值金额')
				}
				uni.showLoading({
					mask:true
				})
				let data={
					price:this.num,
					recharge_id:this.id?this.id:0,
					type:'routine'
				}
				this.$request('user/recharge',data).then(res=>{
					if (res.status == 200) {
						uni.hideLoading()
						this.paying(res.data.config)
					}
				})
			},
			paying(e) {
			
				let that = this
				let orderInfo = {
					timeStamp: e.timestamp,
					nonceStr: e.nonceStr,
					package: e.package,
					signType: e.signType,
					paySign: e.paySign,
				}
				wx.requestPayment({
					...orderInfo,
			
					success: (res) => {
						uni.showToast({
							title: "支付成功",
							icon: "none"
						})
						setTimeout(function() {
							uni.navigateBack({})
						}, 1000)
					},
					fail(e) {
			
						wx.showToast({
							title: '支付失败',
			 			icon: 'none'
						})
					}
				})
			
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		padding-bottom: 340rpx;
		
		.top{
			width: 750rpx;
			height: 260rpx;
			padding: 40rpx 30rpx 0;
			color: #fff;
			background: linear-gradient(179deg, #2BCCA5, #22B591);
			box-sizing: border-box;
			.total{
				margin-top: 15rpx;
				font-size: 52rpx;
				font-weight: bold;
			}
		}
		.content{
			position: relative;
			padding: 0 30rpx;
			margin-top: -60rpx;
			min-height: 500rpx;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			background-color: #fff;
			overflow: hidden;
			z-index: 2;
			.title{
				margin: 36rpx auto 29rpx;
			}
			.input{
				padding: 30rpx 26rpx;
				background: #F6F6F6;
				border-radius: 10rpx;
				input{
					margin-left: 10rpx;
					// font-weight: 400;
					font-size: 30rpx;
				}
				input::placeholder{
					font-weight: 400 !important;
					color: red;
				}

			}
			.list{
				margin-top: 60rpx;
				flex-wrap: wrap;
				&>view{
					position: relative;
					margin-bottom: 48rpx;
					width: 330rpx;
					height: 160rpx;
					line-height: 160rpx;
					text-align: center;
					background: #FFFFFF;
					border: 1rpx solid #DDDDDD;
					border-radius: 16rpx;
					.demo{
						font-size: 40rpx;
						
					}
				}
			}
			.showColor{
				border: 1rpx solid #109C7A !important;
				color: #109C7A;
			}
			.tag{
				position: absolute;
				left: 0;
				top: -20rpx;
				display: inline-block;
				padding: 0 30rpx;
				height: 40rpx;
				line-height: 40rpx;
				font-size: 24rpx;
				color: #fff;
				background: linear-gradient(179deg, #2BCCA5, #22B591);
				border-radius: 16rpx 0rpx 16rpx 0rpx;
			}
			
		}
		.btn{
			position: fixed;
			left: 30rpx;
			bottom: 54rpx;
			z-index: 20;
			background-color: #fff;
			&>view{
				margin: 0 auto;
				width: 690rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 32rpx;
				background: #FFFFFF;
				
				border-radius: 10rpx;
			}
			&>view:nth-child(1){
				color: #109C7A;
				border: 1rpx solid #109C7A;
			}
			.b2{
				margin-top: 30rpx;
				color: #fff;
				background: linear-gradient(64deg, #2BCCA5, #22B591);
				box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(20, 187, 146, 0.4);
			}
		}
	}
</style>
